<template>
	<view class="container">
		<uni-nav-bar class="nav" :class="{'navborder': navBorder}" height="88rpx" backgroundColor="#fff" leftWidth="231rpx" rightWidth="231rpx" :border="false" color="#333" fixed="true" :padding="false"  @tap="dbClick">
			<view class="tab-nav flex-r ac jc">
				<text class="color-grey" v-for="(item,index) in tabBar" :class="{'active':item.value===tabValue}" :key="index" @click="getTabValue(item.value)">{{item.title}}</text>
			</view>
			<template slot="right">
				<image class="right" src="@/public/images/public/dhl_ss.png" mode="aspectFit" @tap="$goByName('barsearch', {type: 'hot'})"></image>
				<image class="right" src="@/public/images/bar/wdxx.png" mode="aspectFit" @tap="$goByName('barnotice')"></image>
				<view class="note" v-if="message.count && message.avatarList">
					<text>{{message.count>99?'99+':message.count}}</text>
				</view>
			</template>
		</uni-nav-bar>
		<scroll-view class="scroll-Y" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true"
			:refresher-enabled="true" :enable-back-to-top="true" :refresher-triggered="refreshing"
			refresher-default-style="none" refresher-background="rgba(255, 255, 255, 0)" @refresherrefresh="refresh"
			@scrolltolower="reachBottom" @scroll="scroll">
			<view class="body">
				<view v-if="tabValue==='hot'">
					<view class="head-box">
						<view class="swiper mb20" v-if="recBanners[0]">
							<uni-swiper-dot :info="recBanners" :current="current.banner" mode="round"
								:dotsStyles="dotsStyles">
								<swiper class="swiper-box" :autoplay="true" :circular="true"
									@change="bannerChange($event, 'banner')" @tap="goBannerDetail(current.banner)">
									<swiper-item class="swiper-item flex-r jc" v-for="(banner, index) in recBanners"
										:key="index">
										<image class="banner-img" :src="banner.imgUrl" mode="aspectFill"></image>
									</swiper-item>
								</swiper>
							</uni-swiper-dot>
						</view>
						<!-- <view class="message mb20 flex-r ac jsb" v-if="message.count && message.avatarList"
							@tap="$goByName('barnotice')">
							<view class="user-list flex-r ac">
								<lazy-image v-for="(avatar, index) in message.avatarList.slice(0, 5)" :key="index"
									class="user-avatar border-round"
									:style="'z-index: '+(5-index)+';left:'+(index*46)+'rpx;'" :src="avatar" type="user"
									fit="cover"></lazy-image>
							</view>
							<text class="text-small color-white">您有{{message.count}}条未读消息</text>
						</view> -->
					</view>
					<!-- 推荐视频 -->
					<view class="video flex-c" v-if="recVideos[0]">
						<view class="video-head  flex-r ac jsb">
							<text class="text-large">视频推荐</text>
							<view class="flex-r ac" @tap="$goByName('videolist', {type: 'discuss'})">
								<text class="text-secondary color-grey">查看更多</text>
								<image class="right-icon" src="@/public/images/public/yjt_h.png" mode="aspectFit">
								</image>
							</view>
						</view>
						<swiper class="video-body" @change="bannerChange($event, 'video')"
							:display-multiple-items="recVideos.length > 1 ? 2 : 1" @tap="goVideoDetail">
							<swiper-item class="swiper-item" v-for="(video, index) in recVideos" :key="index">
								<view class="video-detail flex-r ac jc"
									:class="{'last': current.video+2 == recVideos.length && recVideos.length>2}"
									:data-video="index">
									<lazy-image class="thumb-img" :src="video.videoUrl+'?vframe/jpg/offset/7'"
										fit="cover"></lazy-image>
									<image class="play-spt" src="@/public/images/bar/spt.png"></image>
									<image class="play-icon" src="@/public/images/public/bfj.png" mode="widthFix">
									</image>
									<view class="title-box flex-r ac">
										<!-- <view class="expert-avatar flex-r ac jc">
											<lazy-image class="image border-round"
												:src="video.userAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert"
												fit="cover"></lazy-image>
										</view> -->
										<view class="text-small  color-white text-hidden">{{video.title}}</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="article mt20 flex-c">
						<view class="title thinborder">
							<text class="text-large">热帖推荐</text>
						</view>
						<EmptyContent top="160rpx" text="暂无推荐热帖" img="qsy_zwxl" v-if="!hotList.data[0]"
							@refresh="getHotList"></EmptyContent>
						<ContentList :marginTop="false" :list="hotList.data" type="ballbar" v-else></ContentList>
						<view class="list-end flex-r pb20" v-if="hotList.isEnd && hotList.data[0]">
							<text>已经到底啦～</text>
						</view>
					</view>
				</view>
				<view v-else>
						<EmptyContent top="160rpx" text="暂无更多球吧" img="qsy_zwxl" v-if="!recommendBar[0]" @refresh="getRecommendBar"></EmptyContent>
						<RecommendBarList v-else :recommendBar="recommendBar"></RecommendBarList>
						<view class="list-end flex-r pb20" v-if="recommendBar[0]&&isEnd">
							<text>已经到底啦～</text>
						</view>	
				</view>
			</view>
		</scroll-view>
		<AppDown v-if="platform!='ios'"></AppDown>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0, //scrollview滚动高度
				refreshing: false, //刷新状态
				isShowSearch: false, //展示搜索状态
				navBorder: false, //导航底部边框状态
				navBgColor: 'rgba(255,255,255,1)', //导航栏背景色

				recBanners: [], //推荐banner
				recVideos: [], //推荐视频
				current: {
					banner: 0,
					video: 0
				}, //当前banner
				dotsStyles: { //banner style
					backgroundColor: '#fff',
					selectedBackgroundColor: '#fff',
					border: "none",
					selectedBorder: "none",
				},
				tabBar: [{
						title: "热帖",
						value: "hot"
					},
					{
						title: "球吧",
						value: "bar"
					}
				],
				tabValue: "hot", //tab切换
				followBar: [], //关注的球吧
				recommendBar: [], //推荐的球吧
				hotList: { //热帖推荐数据
					data: [],
					pageNo: 1,
					isEnd: false
				},
				message: {} ,//球吧消息
				pageNo:1,//球吧请求页数
				isEnd:false,//更新结束状态
				customStyle:{
					width: '36rpx',
					height: '36rpx',
					background: '#F23030',
					textAlign: 'center',
					lineHeight: '36rpx',
					fontSize:'24rpx'
					
				},
			};
		},
		computed: {
			user() {
				return this.$store.state.user
			}
		},
		components: {
			ContentList: () => import("@/components/ch-article/ch-contentlist.vue"), //热帖列表
			RecommendBarList: () => import("./components/ch-ballbar/ch-recommendBarList.vue"), //推荐球吧列表
		},
		onLoad() {
			this.getRecBanners()
			this.getRecVideos()
			this.getHotList()
			let windowWidth = uni.getWindowInfo().windowWidth
			if (windowWidth) {
				this.dpr = windowWidth / 750
			} else {
				this.dpr = 0.5
			}
		},
		onShow() {
			//更新未读消息数量
			if(this.$store.state.isLogin){
				this.$store.dispatch('updateBarNotice').then((num) => {
					console.log(num);
					if (num !== this.message.count) {
						//查询未读消息
						this.getUnreadMessage()
					}
					this.$set(this.message, 'count', num);
				})
			}
		},
		onTabItemTap() {
			this.dbClick()
		},
		methods: {
			//屏幕滑动
			scroll(e) {
				this.scrollTop = e.detail.scrollTop
				if (!this.timeout) {
					this.timeout = setTimeout(() => {
						this.timeout = null
						if (this.scrollTop > 10) {
							this.navBorder = true
						} else {
							this.navBorder = false
						}
						if (this.scrollTop > 96 * this.dpr) {
							this.isShowSearch = true
						} else {
							this.isShowSearch = false
						}
					}, 100)
				}
			},
			//下拉刷新
			refresh() {
				this.refreshing = true
				//查询banner
				this.getRecBanners()
				//查询未读消息
				this.getUnreadMessage()
				//刷新推荐视频
				this.getRecVideos()
				//重置并查询热帖
				let defaultObj = {
					pageNo: 1,
					isEnd: false
				}
				//重置pageNo,isEnd
				this.pageNo=1
				this.isEnd=false
				this.hotList = {
					...this.hotList,
					...defaultObj
				}
				this.getHotList()
				//刷新推荐球吧
				this.getRecommendBar()
				setTimeout(() => {
					this.refreshing = false
				}, 800)
			},
			//上滑加载更多
			reachBottom() {
				if (!this.hotList.isEnd) {
					this.getHotList()
				}
				if(this.tabValue==='bar'&&!this.isEnd){
					this.getRecommendBar()
				}
			},
			//banner切换通知
			bannerChange(e, type) {
				let index = e.detail.current
				this.current[type] = index;
			},
			//双击顶部
			dbClick() {
				//双击刷新
				if (this.tabClick) { // 500 内再次点击
					this.scrollTop = 0
				}
				this.tabClick = true
				setTimeout(() => {
					this.tabClick = false // 500 内没有第二次点击，就当作单击
				}, 500)
			},
			//切换tab
			getTabValue(value) {
				this.tabValue = value
				console.log(this.recommendBar,'bar')
				if(this.tabValue!="hot" && this.recommendBar.length==0){
					this.getRecommendBar()
				}
			},
			//查询推荐banner
			getRecBanners() {
				this.$http.get({
					url: '/api/appUser/queryQBBannerRows',
					data: {
						pageNo: 1,
						pageSize: 6
					}
				}).then(data => {
					console.log('Banner', data);
					if (data.success) {
						if (data.result && data.result.records) {
							this.recBanners = data.result.records
						} else {
							this.recBanners = []
						}
					} else {
						uni.showToast({
							title: data.message || '加载失败，请下拉刷新重试',
							icon: 'none'
						})
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//未读消息数量
			getUnreadMessage() {
				this.$http.get({
					url: '/api/notify/unread',
					noLoading: true
				}).then(data => {
					console.log('unread', data);
					if (data.success && data.result) {
						
						this.message = data.result
						//更新球吧角标
						// this.$store.commit('UPDATE_BARNOTICE', data.result.count)
					} else {
						this.message = []
					}
				}).catch((err) => {
					console.log(err);
				})
			},

			//推荐的吧
			getRecommendBar() {
				this.$http.get({
					url: '/api/forum/list',
					data:{
						pageNo: this.pageNo,
						pageSize: 15,
					}
				}).then(data => {
					console.log(data,'推荐球吧');

					if (data.success && data.result && data.result.total) {
						if (this.pageNo == 1) {
							this.recommendBar = data.result.records
						} else {
							this.recommendBar.push(...data.result.records)
						}
						this.isEnd = data.result.current >= data.result.pages
						this.pageNo = data.result.current + 1
						console.log(this.pageNo,this.isEnd)
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//查询推荐视频
			getRecVideos() {
				this.$http.get({
					url: '/api/user/home/recommended/video/dynamic',
					data: {
						pageNo: 1,
						pageSize: 6
					}
				}).then(data => {
					console.log('video', data.result.records);
					// data.result.records.forEach((item)=>{
					// 	let audio=new Audio(item.videoUrl);
					// 	audio.addEventListener("loadedmetadata",function(e){
					// 		console.log(e,audio.duration,'视频时长')
					// 	})
					// })
					if (data.result && data.result.records) {
						this.recVideos = data.result.records
					} else {
						this.recVideos = []
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//热帖推荐
			getHotList() {
				this.$http.get({
					url: '/api/forum/article/recommend',
					data: {
						pageNo: this.hotList.pageNo,
						pageSize: 15
					}
				}).then(data => {
					console.log(data.result,'热帖推荐')
					if (data.success && data.result && data.result.total) {
						if (this.hotList.pageNo == 1) {
							this.hotList.data = data.result.records
						} else {
							this.hotList.data.push(...data.result.records)
						}
						this.hotList.isEnd = data.result.current >= data.result.pages
						this.hotList.pageNo = data.result.current + 1
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//打开轮播图详情
			goBannerDetail(index) {
				if (this.recBanners[index]) {
					let banner = this.recBanners[index]
					switch (banner.type) {
						case 1:
							if (banner.redirectUrl) { //打开外部链接
								let params = {
									src: banner.redirectUrl
								}
								this.$goByName('webview', params)
							}
							break;
						case 2:
							if (banner.sourceId) { //打开专家主页
								this.$CHS.goExpertHome(banner.sourceId)
							}
							break;
						case 3:
							if (banner.sourceId) { //打开料详情
								this.$CHS.goArticleDetail(banner.sourceId)
							}
							break;
						case 4:
							if (banner.title == 'new_award') { //跳转活动页面
								this.$goByName('receivecoupon')
							} else if (banner.title == 'welfare_zc') {
								this.$goByName('benefitslist')
							} else if (banner.title == 'recharge') {
								this.$CHS.goRecharge()
							}
							break;
						case 5:
							if (banner.sourceId) { //打开球吧
								this.$CHS.goBarHome(banner.sourceId)
							}
							break;
						default:
							break;
					}
				}
			},
			//打开视频贴详情
			goVideoDetail(e) {
				if (typeof e.target.dataset.video != 'undefined') {
					let article = this.recVideos[e.target.dataset.video]
					if (article.blacklist === 1 && (article.userType != 'user' || article.userId != this.user.userId)) {
						this.$ShowToast({
							text: '您已被拉入黑名单，不能访问当前内容',
							type: 2,
							time: 3
						})
						return
					}
					let params = {
						barId: article.forumId,
						barName: article.forumName,
						barLogo: article.logo,
						type: article.userType || 'expert'
					}
					if (article.type == 1 || article.type == 99) {
						this.$CHS.goArticleDetail(article.id, params)
					} else if (article.type == 2) {
						this.$CHS.goShareDetail(article.id, params)
					} else if (article.type == 6 || article.type == 7) {
						this.$CHS.goDiscussDetail(article.id, params)
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0;
		.nav{
			.tab-nav{
				width: 100%;
				font-size: 36rpx;
				font-weight: 500;
				.color-grey{
					flex: 2;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					&.active{
						font-weight: bold;
						color: #333333;
					}
				}
			}
			.right{
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
			.note {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 14rpx;
				right: 8rpx;
				background: $uni-primary;
				border-radius: 50%;
				width: 30rpx;
				height: 30rpx;			
				text {
					font-size: 24rpx;
					font-family: Arial;
					color: #FFFFFF;
				}
			}
		}
		.scroll-Y {
			height: calc(var(--safe-height) - #{$tabbar-height} - 88rpx);

			/deep/ .uni-scroll-view-content {
				height: 100%;

				.uni-scroll-view-refresher {
					background-color: #fff !important;
				}
			}
		}
		/deep/ .uni-swiper__dots-box {
			position: absolute;
			bottom: 12rpx;
			right: 30rpx;
			display: flex;
			flex: 1;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
	}
	.body {
		.head-box {
			background-color: #fff;
			padding: 12rpx 20rpx 1rpx;

			.swiper {
				width: 710rpx;
				.swiper-box {
					width: 730rpx;
					height: 180rpx;

					.swiper-item {
						left: -10rpx;
					}

					.banner-img {
						border-radius: 10rpx;
						width: 710rpx;
						height: 180rpx;
					}
				}
				/deep/.uni-swiper__dots-box{
					position: absolute;
					bottom: 12rpx;
					right: 30rpx;
					display: flex;
					flex: 1;
					flex-direction: row;
					justify-content: center;
					align-items: center;
				}
			}

			.message {
				width: 100%;
				height: 80rpx;
				background: linear-gradient(90deg, #4D88FF 0%, #0055FF 100%);
				border-radius: 10rpx;

				.user-list {
					flex: 2;
					margin-left: 10rpx;
					position: relative;
					height: 56rpx;

					.user-avatar {
						width: 56rpx;
						height: 56rpx;
						border: 4rpx solid #FFFFFF;
						box-sizing: border-box;
						position: absolute;
						background-color: #FFFFFF;
					}
				}

				.text-small {
					margin-right: 20rpx;
				}
			}

			.ballbar-box {
				.barlist {
					width: 345rpx;
					height: 400rpx;
					border-radius: 10rpx;
					justify-content: flex-start;

					&.follow {
						background: #FFD9D9;
					}

					&.recommend {
						background: #FFE4BF;
					}

					.barlist-head {
						width: 100%;
						height: 72rpx;
					}

					.barlist-body {
						width: 325rpx;
						height: 248rpx;
						background: #FFFFFF;
						border-radius: 6rpx;

						.bar {
							margin-top: 20rpx;
							margin-left: 20rpx;

							.avatar {
								width: 56rpx;
								height: 56rpx;
							}

							.text-hidden {
								line-height: 56rpx;
								margin-left: 20rpx;
								max-width: 180rpx;
							}
						}

						.empty {
							height: 100%;
							text-align: center;
							padding: 10rpx;
							font-size: 24rpx;
							line-height: 36rpx;

							.color-grey {
								color: #B3B3B3;
							}
						}
					}

					.barlist-foot {
						margin-top: 10rpx;

						.action-btn {
							font-size: 24rpx;
							width: 325rpx;
							height: 60rpx;
							background: #FFFFFF;
							border-radius: 30rpx;
							padding: 0;
							margin: 0;
							border: none;
							line-height: 60rpx;

							.refresh-icon {
								width: 32rpx;
								height: 32rpx;
								margin-right: 10rpx;
							}
						}
					}
				}
			}
		}
		.text-large{
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		
		/* .card{
			background: #FFFFFF;
			padding: 30rpx 20rpx;
			.card-head{
				padding: 0 20rpx;
				.text-large{
					font-weight: 500;
				}
				.right-icon{
					margin-left: 10rpx;
					width: 24rpx;
					height: 26rpx;
				}
			}
			.bar-list{
				.bar{
					.avatar{
						width: 88rpx;
						height: 88rpx;
					}
					.text-hidden{
						margin-top: 15rpx;
						max-width: 110rpx;
					}
				}
			}
		}
		.follow{
			padding: 30rpx 0;
			.scroll-X{
				white-space: nowrap;
				/deep/ .uni-scroll-view-content{
					padding-top: 20rpx;
					height: auto;
				}
				.bar-list{
					width: fit-content;
					.bar{
						width: 128rpx;
					}
					.bar:first-child{
						margin-left: 20rpx;
					}
					.bar:last-child{
						margin-right: 20rpx;
					}
				}
			}
			.empty{
				text-align: center;
				margin: 60rpx auto 30rpx;
				font-size: 24rpx;
				line-height: 36rpx;
				.color-grey{
					color: #B3B3B3;
				}
			}
		}
		.recommend{
			.card-head{
				padding: 0;
				.refresh-icon{
					margin-left: 0;
					margin-right: 10rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}
			.bar-list{
				width: 100%;
				.bar{
					width: 20%;
				}
			}
		}
		*/
		.video {
			background-color: #FFFFFF;

			.video-head {
				height: 55rpx;
				padding: 0 20rpx;

				.right-icon {
					width: 24rpx;
					height: 26rpx;
				}
			}

			.video-body {
				width: 100%;
				height: 242rpx;
				box-sizing: border-box;
				padding: 10rpx 0 20rpx;

				.video-detail {
					position: relative;
					margin-left: 20rpx;
					width: 355rpx;
					height: 202rpx;
					border-radius: 10rpx;

					&.last {
						margin-left: 0;
					}

					.thumb-img {
						pointer-events: none;
						width: 100%;
						height: 202rpx;
						border-radius: 10rpx;
					}

					.play-icon {
						pointer-events: none;
						width: 72rpx;
						height: 72rpx;
						position: absolute;
					}

					.play-spt {
						position: absolute;
						top: 10rpx;
						left: 10rpx;
						width: 80rpx;
						height: 32rpx;
					}

					.title-box {
						pointer-events: none;
						position: absolute;
						width: 100%;
						height: 60rpx;
						bottom: 0;
						left: 0;
						padding: 0 20rpx;
						box-sizing: border-box;
						background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
						border-radius: 0rpx 0rpx 10rpx 10rpx;

						.expert-avatar {
							width: 36rpx;
							height: 36rpx;
							border: 2rpx solid #fff;
							box-sizing: border-box;
							background-color: #FFFFFF;
							border-radius: 50%;
							margin-right: 20rpx;

							.image {
								width: 32rpx;
								height: 32rpx;
							}
						}
						.text-small {
							font-family: PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							font-size: 28rpx;
						}
					}
				}
			}
		}

		.article {
			.title {
				font-weight: 500;
				background-color: #FFFFFF;
				padding: 30rpx 20rpx 20rpx;
				//border-bottom: 1rpx solid #EDEDED;
			}
		}

	}
</style>